<template lang="pug">
  .clearfix
    Modal(
      width="600"
      v-model="isShowChooseTypeModal"
      title="选择审批方式"
    )
      p modalType: {{modalType}}
      .search-form.mb-10.pl-10.pr-10
        Form.ivu-row.ivu-form-basic(ref="formData" :model="formData" :rules="setRules" :label-width="100")
          FormItem.form-item.ivu-col.pr-20(v-for="(item, index) of formItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
            template(v-if="item.type === 'select'")
              Select(v-model="formData[item.model]" :placeholder="item.placeholder" clearable filterable)
                Option(
                  v-for="(c_item, index) in arrListDown[item.options]"
                  :value="c_item.value"
                  :key="index"
                ) {{ c_item.label }}
            template(v-if="item.type === 'input'")
              Input(v-model="formData[item.model]" :placeholder="item.placeholder" clearable)
            template(v-if="item.type === 'radio'")
              RadioGroup.beautiful-radio-group(type="button" v-model="formData[item.model]")
                Radio.display-inline-block(v-for="(c_item, index) of arrListDown[item.options]" :label="c_item.value" :key="index") {{c_item.label}}

      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 关闭
        Button(type="primary" @click="handleSubmit" :loading="!isCanSubmit") 确定
</template>

<script>
const colStyle = 'ivu-col-span-24'

export default {
  name: '',

  props: {
  },

  computed: {
    setRules () {
      if (this.formData.auditType == 1) {
        console.log('垫款金额字段 隐藏')
        this.rules.advanceAmt = []
      } else if (this.formData.auditType == 2) {
        console.log('垫款金额字段 显示')
        this.rules.advanceAmt = [{ required: true, message: '请输入垫款金额', trigger: 'change' }, { validator: this.validateAmt, trigger: 'blur' }]
      }
      return this.rules
    }
  },

  data () {
    const validateAmt = (rule, value, callback) => {
      if (value <= 0) {
        callback(new Error('金额不能为0和负数'))
      } else {
        callback()
      }
    }

    return {
      isShowChooseTypeModal: false,
      isCanSubmit: true,
      modalType: null,
      formData: {
        auditType: '',
        advanceAmt: '',
        explain: '',
      },
      formItem: [
        { type: 'radio', label: '审批方式：', placeholder: '请选择审批方式', prop: 'auditType', model: 'auditType', style: colStyle, options: 'auditTypeOps', fn: 'auditTypeChange' },
        { type: 'input', label: '垫款金额：', placeholder: '请输入垫款金额', prop: 'advanceAmt', model: 'advanceAmt', style: colStyle },
        { type: 'input', label: '说明：', placeholder: '请输入说明', prop: 'explain', model: 'explain', style: colStyle },
      ],
      rules: {
        auditType: [
          { required: true, message: '请选择审批方式', trigger: 'change' }
        ],
        advanceAmt: [
          { required: true, message: '请输入垫款金额', trigger: 'change' },
          { validator: validateAmt, trigger: 'blur' }
        ],
      },
      arrListDown: {
        auditTypeOps: [{label: '常规请款审批', value: '1'}, {label: '垫付请款审批', value: '2'}]
      }
    }
  },

  watch: {
  },

  mounted () {
  },

  methods: {
    show () {
      this.isShowChooseTypeModal = true
    },

    cancel () {
      this.isShowChooseTypeModal = false
      this.$refs.formData.resetFields()
    },

    // 审批方式改变
    auditTypeChange (model, value) {
      console.log('审批方式改变 model: ', model, ', value: ', value)
      if (value == '1') {
        console.log('垫款金额字段 隐藏')
        this.formItem.map(item => {
          if (item.model == 'advanceAmt') {
            item.style = 'ivu-col-span-12 display-none'
          }
        })
      } else if (value == '2') {
        console.log('垫款金额字段 显示')
        this.formItem.map(item => {
          if (item.model == 'advanceAmt') {
            item.style = 'ivu-col-span-12 display-block'
          }
        })
      }
      this.formData.advanceAmt = null
    },

    handleSubmit () {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          console.log('提交 formData：', this.formData)
          this.$emit('handleSubmitChooseTypeModal', this.formData)
          this.cancel()
        }
      })
    },
  }
}
</script>
